<template>
  <div>
    <router-view />
    <!-- 底部导航栏 -->
    <van-tabbar v-model="active" fixed v-if="isTabbarVisible">
      <!-- 活动 tab -->
      <van-tabbar-item
        icon="home-o" 
        @click="navigateTo('activity')"
      >活动</van-tabbar-item>
      <!-- 我的 tab -->
      <van-tabbar-item
        icon="user-o" 
        @click="navigateTo('my')"
      >我</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import { Tabbar, TabbarItem } from 'vant';

export default {
  components: {
    'van-tabbar': Tabbar,
    'van-tabbar-item': TabbarItem
  },
  data() {
    return {
      active: 0,
    };
  },
  computed: {
    // 判断是否在展示底部导航栏的页面
    isTabbarVisible() {
      const { name, path } = this.$route;
      // 检查是否在活动和我的页面（可以根据实际路由修改路径）
      const showTabbarRoutes = ['/user/activity', '/organizer/activity', '/user/profile', '/organizer/profile'];
      return showTabbarRoutes.includes(path);
    },
    isLoginPage() {
      return this.$route.name === 'login';
    },
    isUserSpace() {
      return this.$route.path.startsWith('/user');
    },
    isOrganizerSpace() {
      return this.$route.path.startsWith('/organizer');
    }
  },
  watch: {
    $route() {
      this.setActiveTab();
    }
  },
  methods: {
    // 设置当前激活的tab
    setActiveTab() {
      const { path } = this.$route;
      if (path.includes('activity')) {
        this.active = 0;
      } else if (path.includes('profile')) {
        this.active = 1;
      }
    },
    // 跳转逻辑
    navigateTo(page) {
      const currentPath = this.$route.path;
      let targetPath = '';

      if (page === 'activity') {
        targetPath = this.isUserSpace ? '/user/activity' : '/organizer/activity';
      } else if (page === 'my') {
        targetPath = this.isUserSpace ? '/user/profile' : '/organizer/profile';
      }

      if (currentPath !== targetPath) {
        this.$router.push(targetPath);
      }
    }
  },
  mounted() {
    this.setActiveTab();
  }
};
</script>

<style scoped>
/* 自定义底部导航栏样式 */
.van-tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #ffffff; /* 设置背景色 */
  border-top: 0.1vh solid #ddd; /* 设置边框 */
}

.van-tabbar-item {
  text-align: center; /* 使文本和图标居中对齐 */
}

.van-tabbar-item .van-icon {
  font-size: 2vh; /* 设置图标大小 */
  margin-bottom: 0.4vh; /* 设置图标和文字之间的间距 */
}

.van-tabbar-item span {
  font-size: 1.2vh; /* 设置文字大小 */
}
</style>
